<template>
  <div class="list">
     <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 视图 -->
    <el-card class="box-card">
      <el-row :gutter='20'>
        <el-col :span=8>
            <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear='getGoodList'>
            <el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>
             </el-input>
        </el-col>
        <el-col :span=4>
          <el-button type='primary' @click="goAddPage">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data='good_list' border stipre>
        <el-table-column type='index'></el-table-column>
        <el-table-column label='商品名称' prop='goods_name'></el-table-column>
         <el-table-column label='商品价格(元)' prop='goods_price' width='90px'></el-table-column>
          <el-table-column label='商品重量' prop='goods_weight' width='70px'></el-table-column>
           <el-table-column label='商品创建时间' prop='add_time' width='140px'>
             <template slot-scope="scope">
                 {{scope.row.add_time|dataFormat}}
             </template>
           </el-table-column>
            <el-table-column label='操作' width='130px'>
              <template slot-scope="scope">
                <el-button icon='el-icon-edit' type='primary' size="mini"></el-button>
                <el-button icon='el-icon-delete' type='danger' size="mini" @click="deletebyid(scope.row.goods_id)"></el-button>    
              </template>
            </el-table-column>
      </el-table>
      <!-- 分页 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
          </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return{
      good_list:[],
      //查询参数
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:10
      },
      total:0
    }
  },
  created(){
     this.getGoodList()
  },
  //根据分页获取商品列表
  methods:{
  async  getGoodList(){
     let {data:res} =await this.$http.get('goods',{params:this.queryInfo})
     if (res.meta.status !== 200) {return this.$message.error('获取商品列表失败')
     }
     //console.log(res.data)
     this.good_list = res.data.goods
     this.total = res.data.total
  },
  /*页size */
  handleSizeChange(val){
    this.queryInfo.pagesize = val
    this.getGoodList()
  },
  /* 页码发生改变 */
  handleCurrentChange(val){
    this.queryInfo.pagenum = val
    this.getGoodList()
  },
  /*  */
 async  deletebyid(id){
    let confirm =  await   this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirm !=='confirm') {
          return this.$message.info('取消删除')
        }
        let {data:res} = await this.$http.delete(`goods/${id}`)
        if (res.meta.status !== 200) {
          return this.$message.error();
          ('删除商品失败')
        }
        this.$message.success('删除成功')
        this.getGoodList()
  },
  /* 添加页面 */
  goAddPage() {
    this.$router.push('/goods/add')
  }

}
}
</script>

<style lang="less" scoped>

</style>